<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>

</style>
<script type="text/javascript">
	// 더보기를 위한 변수
	var morePaging = 1;
	$(function(){
		var numberOfContentsPerPage = ${listVO.pagingBean.numberOfContentsPerPage-1};
		var boardNo = (${fn:length(listVO.list)} > 0) ? "${listVO.list[listVO.pagingBean.numberOfContentsPerPage-1].no}" : 0;
		
		$("#musicboard").attr("class", "active");
		
		$("#moreShowBtn").click(function(){
			if(morePaging < ${listVO.pagingBean.totalPage}){
				
				var searchData = "";
				if(${listVO.mbvo.title != null}){
					searchData = "&title=${listVO.mbvo.title}";
				}
				if(${listVO.mbvo.genre != null}){
					searchData = "&genre=${listVO.mbvo.genre}";
				}
				
				$.ajax({
					type:"post",
					url:"musicboard_morePagingContent.ju",
					data:"no="+boardNo+"&nowPage="+(morePaging+1)+searchData,
					dataType:"json",
					success:function(json){
						morePaging++;
						
						if(morePaging >= ${listVO.pagingBean.totalPage}){
							$("#moreShowSection").empty();
						}
						
						$.each(json.list, function(i, list){
							$("#musicboard_section").append("<tr list-no="+list.no+" list-src='"+list.newFile+"' style='width: 600px;'>"
									+"<td><button type='button' name='playBtn' class='btn btn-success' style='width: 53px;'>▶</button></td>"
									+"<td>"
									+"<div><a href=musicboard_updateHit.ju?boardNo="+list.no+" style='text-decoration: none;'><span>["+list.genre+"]</span>"+list.title+"</a>"
									+"<span name='like'>+"+list.like+"</span>"
									+"<span style='float: right;'>"
									+"<button type='button' name='likeBtn' class='btn btn-default btn-xs'>추천</button>&nbsp;"
									+"<button type='button' name='selectPlayListBtn' class='btn btn-default btn-xs' >플레이리스트+</button>"
									+"</span>"
									+"</div>"
									+"<div class='audioPlayArea' style='margin-top: 10px;'></div>"
									+"</td>"
									+"<td>"+list.memberVO.nickname+"</td>"
									+"<td>"+list.date+"</td>"
									+"<td align='center'>"+list.hit+"</td>"
								+"</tr>");
							
							boardNo = list.no;
						});//each
					}
				});//ajax
			}
		});//moreShow click
		
		$("#writeBtn").click(function(){
			location.href = "musicboard_goWriteContent.ju";
		});//writeBtn click
		
		$("#musicboard_section").on("click", ":input[name=playBtn]", function(){
			$(":input[name=stopBtn]").each(function(i){
				$(this).text("▶");
				$(this).attr("name", "playBtn");
				$(this).parents("tr:has(.audioPlayArea)").children("td:has(.audioPlayArea)").children(".audioPlayArea").html("");
			})
			$(this).text("■");
			$(this).attr("name", "stopBtn");
			$(this).parents("tr:has(.audioPlayArea)").children("td:has(.audioPlayArea)").children(".audioPlayArea").html(
					"<audio controls loop autoplay='autoplay' style='width: 100%'>"
					+"<source src='${initParam.audioPath }"+$(this).parents("tr").attr("list-src")+"' type='audio/mpeg'></source>"
					+"</audio>");
		});//playBtn click
		
		$("#musicboard_section").on("click", ":input[name=stopBtn]", function(){
			$(this).text("▶");
			$(this).attr("name", "playBtn");
			$(this).parents("tr:has(.audioPlayArea)").children("td:has(.audioPlayArea)").children(".audioPlayArea").html("");
		});//stopBtn click
		
		$("#musicboard_section").on("click", ":input[name=likeBtn]", function(){
			var $like = $(this).parents("div").children("span[name=like]");
			$.ajax({
				type:"post",
				url:"musicboard_updateLike.ju",
				data:"boardNo="+$(this).parents("tr").attr("list-no"),
				dataType:"json",
				success:function(json){
					alert(json.msg);
					$like.text("+"+json.likeCnt);
				}
			});
		});//likeBtn click
		
		var selectMusicNo = 0;
		$("#musicboard_section").on("click", ":input[name=selectPlayListBtn]", function(){
			$(".modal").modal();
			
			selectMusicNo = $(this).parents("tr").attr("list-no");
			if(${sessionScope.mvo != null}){
				$.ajax({
					type:"post",
					url:"playlist_ajaxPlayList.ju",
					dataType:"json",
					success:function(json){
						if(json.length>0){
							$(".modal-body").empty();
							$(".modal-body").append("<select class='form-control'>");
							$.each(json, function(i, data){
								$(".modal-body select").append("<option value="+data.PLAYLIST_NO+">"+data.PLAYLIST_NAME+"</option>");
							});
						}else{
							$("#addMusicListBtn").css("display", "none");
							$("#modal-body p").text("플레이리스트를 추가하세요.");
						}
					}
				});
			}
			
		});//selectPlayListBtn click
		
		$("#addMusicListBtn").click(function(){
			$.ajax({
				type:"post",
				url:"playlist_addMusicList.ju",
				data:"musicboard_no="+selectMusicNo+"&playlist_no="+$(".modal-body select").val(),
				dataType:"json",
				success:function(json){
					
					if(json == true){
						alert($(".modal-body select option[value="+$(".modal-body select").val()+"]").text()+"에 추가되었습니다.");
					}else{
						alert("이미 추가된 음악입니다.");
					}
				}
			});
		});//addmusiclist
	});//ready
</script>

<div class="modal fade">
	  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #000000">×</button>
        <h4 class="modal-title">플레이리스트에 추가</h4>
      </div>
      <div class="modal-body" id="modal-body">
      	<c:choose>
      		<c:when test="${sessionScope.mvo == null }">
      			<p>로그인이 필요합니다.</p>
      		</c:when>
      		<c:otherwise>
      			<p>플레이리스트 선택</p>
      		</c:otherwise>
      	</c:choose>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
        <c:if test="${sessionScope.mvo != null }">
        	<button type="button" class="btn btn-primary" id="addMusicListBtn">추가</button>
        </c:if>
      </div>
    </div>
  </div>
</div>

<table class="table table-striped table-hover ">
	<thead>
		<tr>
			<th align="center">재생</th>
			<th>제목</th>
			<th align="center">작성자</th>
			<th align="center">작성일</th>
			<th align="center">조회수</th>
		</tr>
	</thead>
	<tbody id="musicboard_section">
	<c:forEach items="${listVO.list }" var="list">
		<tr list-no="${list.no }" list-src="${list.newFile }">
			<td><button type="button" name="playBtn" class="btn btn-success " style="width: 53px;">▶</button></td>
			<td style="width: 600px;">
				<div>
					<a href="musicboard_updateHit.ju?boardNo=${list.no }" style="text-decoration: none;">
						<span>[${list.genre }]</span>&nbsp;${list.title }</a>
					<span name="like">+${list.like }</span>
					<span style="float: right;">
						<button type="button" name="likeBtn" class="btn btn-default btn-xs">추천</button>
						<button type="button" name="selectPlayListBtn" class="btn btn-default btn-xs" >플레이리스트+</button>
					</span>
				</div>
				<div class="audioPlayArea" style="margin-top: 10px;"></div>
			</td>
			<td>${list.memberVO.nickname }</td>
			<td>${list.date }</td>
			<td align="center">${list.hit }</td>
		</tr>
	</c:forEach>
	</tbody>
</table>
<c:if test="${sessionScope.mvo != null }">
	<button type="button" id="writeBtn" class="btn btn-default" style="float: right;">글쓰기</button>
</c:if>
<br>
<c:if test="${listVO.pagingBean.totalPage > listVO.pagingBean.nowPage}">
<div id="moreShowSection">
	<button type="button" id="moreShowBtn" class="btn btn-success" style="width:940px">더보기</button>
</div>
</c:if>